<template>
    <el-card style="height: 70px; margin-bottom: 10px;">
        <div>
            <el-form :inline="true" class="form">
                <el-form-item label="用户名:">
                    <el-input placeholder="请输入搜索的用户名" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="default" @click="">搜索</el-button>
                    <el-button type="primary" size="default" @click="">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>

    <el-card>

        <el-button type="primary" size="default" @click="addUser">添加用户</el-button>
        <el-button type="primary" size="default" :disabled="selectIDArray.length > 0 ? false : true"
            @click="mutableDelete">批量删除</el-button>

        <!-- 表格展示 -->
        <el-table style="margin: 10px 0;" border :data="dataArr" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="80" align="center" />
            <el-table-column label="#" align="center" type="index" />
            <el-table-column label="ID" align="center" prop="id" />
            <el-table-column label="用户名字" align="center" prop="userName" />
            <el-table-column label="用户昵称" align="center" prop="nickName" />
            <el-table-column label="用户角色" align="center" prop="role" />
            <el-table-column label="创建时间" align="center" prop="creatDate" />
            <el-table-column label="更新时间" align="center" prop="updateDate" />
            <el-table-column label="操作" width="300px" align="center">
                <template #="{ row }">
                    <el-button type="primary" size="small" icon="User" @click="distributeRole(row)">分配角色</el-button>
                    <el-button type="primary" size="small" icon="Edit" @click="updateUser(row)">编辑</el-button>
                    <el-button type="primary" size="small" icon="Delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]"
            :background="true" layout="prev, pager, next, jumper, ->, sizes,total" :total="400" />

    </el-card>

    <!-- 抽屉 添加和更新用户 -->
    <el-drawer v-model="drawer">
        <template #header>
            <h4>{{ userParam.id ? "修改用户" : "添加用户" }}</h4>
        </template>
        <template #default>
            <el-form :model="userParam" :rules="rules" ref="formRef">
                <el-form-item label="用户姓名" prop="userName">
                    <el-input placeholder="请输入用户姓名" v-model="userParam.userName" />
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input placeholder="请输入用户昵称" v-model="userParam.nickName" />
                </el-form-item>
                <el-form-item label="用户密码" prop="password" v-show="!userParam.id">
                    <el-input placeholder="请输入用户密码" v-model="userParam.password" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="sure">确定</el-button>
            </div>
        </template>
    </el-drawer>

    <!-- 分配角色 -->
    <el-drawer v-model="distributeRoleDrawer">
        <template #header>
            <h4>分配角色(职位)</h4>
        </template>
        <template #default>
            <el-form>
                <el-form-item label="用户姓名">
                    <el-input disabled v-model="userParam.userName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="角色列表">
                    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    <!-- 显示职位复选框 -->
                    <el-checkbox-group v-model="userRole" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="(role, index) in allRoleArray" :key="index" :label="role">
                            {{ role.roleName }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="roleCancel">取消</el-button>
                <el-button type="primary" @click="roleSure">确定</el-button>
            </div>
        </template>
    </el-drawer>

</template>

<script setup lang='ts' name='User'>
import { nextTick, reactive } from 'vue';
import { onMounted, ref } from 'vue';
import type { User, UserRole } from '@/api/acl/user';
import { userArr, userRoleArr } from '@/api/acl/user/tempData';

let pageNo = ref(1);
let pageSize = ref(10);

/// 添加和编辑用户抽屉
let drawer = ref<boolean>(false)

/// 分配抽屉
let distributeRoleDrawer = ref<boolean>(false)

/// 表单
let formRef = ref()

/// 数据
let dataArr = ref<User[]>([])

/// 参数
let userParam = reactive<User>({})

/// 表单校验
const rules = {
    userName: [
        {
            required: true, trigger: 'blur', validator: (_rule: any, value: string, callback: any) => {
                if (value.trim().length >= 5) {
                    callback();

                } else {
                    callback(new Error('用户名长度不能小于5位'))
                }
            }
        }
    ],
    nickName: [
        {
            required: true, trigger: 'blur', validator: (_rule: any, value: string, callback: any) => {
                if (value.trim().length >= 5) {
                    callback();

                } else {
                    callback(new Error('昵称长度不能小于5位'))
                }
            }
        }
    ],
    password: [
        {
            required: true, trigger: 'blur', validator: (_rule: any, value: string, callback: any) => {
                if (value.trim().length >= 6) {
                    callback();

                } else {
                    callback(new Error('用户密码不能小于6位'))
                }
            }
        }
    ]
}

onMounted(() => {
    dataArr.value = userArr
});

/// 添加用户
const addUser = () => {
    drawer.value = true
    Object.assign(userParam, {
        userName: '',
        nickName: '',
        password: '',
        id: ''
    })

    /// 清除掉错误信息
    nextTick(() => {
        formRef.value.clearValidate('userName')
        formRef.value.clearValidate('nickName')
        formRef.value.clearValidate('password')
    })
}

/// 更新用户
const updateUser = (row: User) => {
    drawer.value = true
    Object.assign(userParam, row)

    /// 清除掉错误信息
    nextTick(() => {
        formRef.value.clearValidate('userName')
        formRef.value.clearValidate('nickName')
        formRef.value.clearValidate('password')
    })

    /// 浏览器刷新
    // window.location.reload()
}

/// 保存
const sure = async () => {
    /// 点击保存按钮务必保证表单全部验证通过
    await formRef.value.validate

    drawer.value = false

}

/// 取消
const cancel = () => {
    drawer.value = false
    Object.assign(userParam, {
        userName: '',
        nickName: '',
        password: ''
    })
}

/// 分配角色
const distributeRole = (row: User) => {
    distributeRoleDrawer.value = true
    Object.assign(userParam, row)

    let result = userRoleArr()
    allRoleArray.value = result.allRole
    userRole.value = result.user
}

// 测试复选框代码
// 全选复选收集数据
let checkAll = ref(false)
/// 全选框未知样式样式
let isIndeterminate = ref(true)

/// 所有角色
let allRoleArray = ref<UserRole[]>([])
/// 用户角色
let userRole = ref<UserRole[]>([])

/// 处理全选
const handleCheckAllChange = (val: boolean) => {
    userRole.value = val ? allRoleArray.value : []
    isIndeterminate.value = false
}

/// 底部复选框事件
const handleCheckedCitiesChange = (value: UserRole[]) => {
    const checkCount = value.length
    checkAll.value = checkCount === allRoleArray.value.length
    /// 复选框不缺少样式
    isIndeterminate.value = checkCount > 0 && checkCount < allRoleArray.value.length
}

/// 角色取消
const roleCancel = () => {
    distributeRoleDrawer.value = false
    userRole.value = []
    allRoleArray.value = []
    checkAll.value = false
    isIndeterminate.value = true
    /// 清除掉错误信息
}

/// 角色确认
const roleSure = () => {
    // 1、发送请求

    // 2、重置数据
    roleCancel()
}

let selectIDArray = ref<User[]>([])


/// table复选框
const handleSelectionChange = (val: User[]) => {
    selectIDArray.value = val
}

const mutableDelete = () => {
    console.log("删除")
}


</script>

<style scoped lang='scss'>
.form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
